<template>
  <a-pagination
    style="margin-top: 20px; float: right;"
    v-model="pagination.current"
    :pageSize="pagination.pageSize"
    :total="pagination.total"
    showQuickJumper
    showSizeChanger
    @change="handleCurrentChange"
    @showSizeChange="handlePageSizeChange"
    :showTotal="handleShowTotal">
  </a-pagination>
</template>

<script>

import { updatePagination } from '@/utils/util'

export default {

  name: 'PageBar',

  data () {
    return {
      pagination: {
        current: 1,
        pageSize: 10,
        total: 0
      }
    }
  },

  props: {
    pageSize: {
      type: Number,
      default: 10,
      required: false
    }
  },

  created () {
    this.pagination.pageSize = this.pageSize
  },

  methods: {
    handleCurrentChange (current, pageSize) {
      console.log('current change: ', current, pageSize)
      this.$emit('change', current, pageSize)
    },
    handlePageSizeChange (current, pageSize) {
      console.log('pageSizeChange: ', current, pageSize)
      this.$emit('change', current, pageSize)
    },
    handleShowTotal (total, range) {
      return `共 ${total} 条记录`
    },
    updatePagination (data) {
      updatePagination(this.pagination, data)
    },
    setTotal (total) {
      this.pagination.total = total
    },
    getCurrent () {
      return this.pagination.current
    },
    getPageSize () {
      return this.pagination.pageSize
    },
    getTotal () {
      return this.pagination.total
    }

  }

}
</script>

<style lang="less" scoped>
  .title {
    color: rgba(0, 0, 0, .85);
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 16px;
  }
</style>
